<template>
  <div>
    <el-timeline v-if="stepList.length>0">
      <draggable v-model="stepList" delay="100" animation="200" handle=".handle" @end="sortStep">
        <el-timeline-item
          v-for="(s, index) in stepList"
          :key="index"
          :timestamp="'步骤' + (index + 1)"
          placement="top"
          :type="s['errorHandlingType']===1?'primary':(s['errorHandlingType']===2?'warning':'danger')"
          style="padding-bottom: 0px!important;"
          :hollow="true"
        >
          <el-card v-if="s.conditionType !== 0">
            <template #header>
              <step-view-component :step="s" :api-options="apiOptions" />
              <div style="float: right">
                <el-tooltip :tabindex="-1" content="新增" placement="top" :open-delay="500">
                  <el-button circle type="primary" icon="el-icon-document-add" size="mini" @click="addStep(s.id)" />
                </el-tooltip>
                <el-tooltip :tabindex="-1" content="编辑" placement="top" :open-delay="500">
                  <el-button circle type="primary" size="mini" @click="editStep(index,s.parentId)"><i class="el-icon-edit-outline" /></el-button>
                </el-tooltip>
                <el-tooltip :tabindex="-1" content="复制" placement="top" :open-delay="500">
                  <el-button circle type="info" size="mini" @click="copyStep(index,s.parentId)"><li class="el-icon-copy-document" /></el-button>
                </el-tooltip>
                <el-tooltip :tabindex="-1" content="移动" placement="top" :open-delay="500">
                  <el-button class="handle" circle size="mini"><i class="el-icon-rank" /></el-button>
                </el-tooltip>
                <el-tooltip :tabindex="-1" content="删除" placement="top" :open-delay="500">
                  <el-popconfirm
                    style="margin-left: 10px"
                    confirm-button-text="確定"
                    cancel-button-text="取消"
                    icon="el-icon-warning"
                    icon-color="red"
                    title="确定移除该步骤吗？"
                    @confirm="deleteStep(index,s.parentId)"
                  >
                    <template #reference>
                      <el-button circle type="danger" size="mini"><i class="el-icon-delete" /></el-button>
                    </template>
                  </el-popconfirm>
                </el-tooltip>
              </div>
            </template>
            <StepListComponent :api-options="apiOptions" :steps="s['childSteps']" @setParent="setParent" @addStep="addStep" @editStep="editStep" @deleteStep="deleteStep" @copyStep="copyStep" @sortStep="sortStep" />
          </el-card>
          <div v-else style="display: flex; justify-content: space-between;">
            <step-view-component :step="s" :api-options="apiOptions" />
            <div style="float: right;flex: 0 0 185px;text-align: right;">
              <el-tooltip :tabindex="-1" content="编辑" placement="top" :open-delay="500">
                <el-button circle type="primary" size="mini" @click="editStep(index,s.parentId)"><i class="el-icon-edit-outline" /></el-button>
              </el-tooltip>
              <el-tooltip :tabindex="-1" content="复制" placement="top" :open-delay="500">
                <el-button circle type="info" size="mini" @click="copyStep(index,s.parentId)"><li class="el-icon-copy-document" /></el-button>
              </el-tooltip>
              <el-tooltip :tabindex="-1" content="移动" placement="top" :open-delay="500">
                <el-button class="handle" circle size="mini"><i class="el-icon-rank" /></el-button>
              </el-tooltip>
              <el-tooltip :tabindex="-1" content="删除" placement="top" :open-delay="500">
                <el-popconfirm
                  style="margin-left: 10px"
                  confirm-button-text="確定"
                  cancel-button-text="取消"
                  icon="el-icon-warning"
                  icon-color="red"
                  title="确定删除该步骤吗？"
                  @confirm="deleteStep(index,s.parentId)"
                >
                  <template #reference>
                    <el-button circle type="danger" size="mini"><i class="el-icon-delete" /></el-button>
                  </template>
                </el-popconfirm>
              </el-tooltip>
            </div>
          </div>
        </el-timeline-item>
      </draggable>
    </el-timeline>
    <el-empty v-else description="暂无步骤" />
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import StepViewComponent from '@/components/functional_test/TestCase/StepView.vue'

export default {
  name: 'StepListComponent',
  components: { draggable, StepViewComponent },
  props: {
    apiOptions: {
      type: Array,
      default: () => []
    },
    steps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      stepList: this.steps // draggable 直接操作 props.steps 会报，避免直接更改属性 的警告。所以创建了个用属性值。
    }
  },
  watch: {
    steps: {
      handler(value) {
        this.stepList = value
      },
      deep: true
    }
  },
  created() {
  },
  methods: {
    // 设置父 ID（遇到 if、for 这种有 childSteps 的需要用到 parentId）
    setParent(id) {
      this.$emit('setParent', id)
    },
    // 添加一个 step
    addStep(pId) {
      this.setParent(pId)
      this.$emit('addStep', pId)
    },
    // 编辑一个 step
    editStep(index, pId) {
      this.setParent(pId)
      this.$emit('editStep', index, pId)
    },
    // 删除一个 step
    deleteStep(index, pId) {
      this.setParent(pId)
      this.$emit('deleteStep', index, pId)
    },
    // 复制一个 step
    copyStep(index, pId) {
      this.setParent(pId)
      this.$emit('copyStep', index, pId)
    },
    // step 拖动后排序
    sortStep(e, pId) {
      // 第一次拖动（draggable）时，没有 pId。由于当前 steps 都在一个 parentId 下，所以用任意一个 step 的 parentId 当作 parentId
      if (!pId) {
        pId = this.steps[0].parentId
      }

      this.setParent(pId)
      this.$emit('sortStep', e, pId)
    }
  }
}
</script>
